<template>
  <div class="order">
    <div class="topBar">
      <van-nav-bar left-arrow @click-left="$router.back()" fixed>
        <template #title>
          <span class="BarTitle">订单列表</span>
        </template>
      </van-nav-bar>
    </div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <!-- 唯一id、订单id、餐馆图片、餐馆名、订单创建时间 -->
      <!-- 订单状态、付款停止的时间、第一道菜名、商品数、总价 -->
      <OrderList
        v-for="item in orList"
        :key="item._id"
        :restaurant_id="item.restaurant_id"
        :order_id="item.id"
        :image_url="'https://api.52kfw.cn/img/' + item.restaurant_image_url"
        :restaurant_name="item.restaurant_name"
        :order_create_time="item.formatted_created_at"
        :status_title="item.status_bar.title"
        :time_pass="item.time_pass + item.order_time"
        :dish_name="item.basket.group[0]"
        :total_quantity="item.total_quantity"
        :total_amount="item.total_amount"
      ></OrderList>
    </van-pull-refresh>
  </div>
</template>

<script>
//列表展示组件
import OrderList from "@/components/order/OrderList.vue"
// 按需导入 API 接口
import { getOrderListAPI } from "@/api/OrderAPI.js"

export default {
  name: "Order",
  data() {
    return {
      //用户id
      userId: 6,
      //显示15条记录
      limit: 15,
      //订单数组
      orList: [],
      // 是否正在加载下一页数据，如果 loading 为 true，则不会反复触发 load 事件
      // 每当下一页数据请求回来之后， loading = false
      loading: true,
      // 所有数据是否加载完毕了，如果没有更多数据了，finished = true
      finished: false,
      isLoading: true
    }
  },
  created() {
    this.initOrderList()
  },
  methods: {
    // 封装获取文章列表数据的方法
    async initOrderList() {
      // 发起 GET 请求，获取文章的列表数据
      const { data: res } = await getOrderListAPI(
        this.userId, 
        this.limit
      )
      this.orList = [...res]
      this.loading = false
      if (res.length === 0) {
        // 证明没有数据了，直接把 finished 改为 true，表示数据加载完了！
        this.finished = true
      }
    },
    // 下拉刷新的处理函数
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false
        this.initOrderList()
      }, 1000)
    }
  },
  components: {
    OrderList
  }
}
</script>

<style lang="less" scoped>
.order {
  margin-top: 2.5rem;
  color: #333;
  background-color: #f1f1f1;
  /deep/.BarTitle {
    font-weight: 700;
  }
}
</style>
